<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件目标监听和移除(Event target monitoring and removal)</title>
  <!-- 
  在JavaScript中，事件目标监控和移除是处理用户交互的重要部分。通过监控事件目标，开发者可以响应用户的操作，而通过移除事件监听器，开发者可以控制事件的触发和处理。
  一、事件目标监控
  1. 事件监听器的添加：
    - 使用 addEventListener 方法可以为DOM元素添加事件监听器。该方法允许开发者指定要监听的事件类型和相应的处理函数。
    const button = document.getElementById('myButton');
    button.addEventListener('click', function(event) {
      console.log('按钮被点击了！');
      console.log('事件目标:', event.target); // 输出触发事件的目标元素
    });
  2. 事件对象：
    - 当事件被触发时，事件处理函数会接收到一个事件对象（event），该对象包含有关事件的详细信息，包括事件类型、目标元素、鼠标位置等。
    - 通过 event.target 可以获取触发事件的具体元素。

  二、事件监听器的移除
  1. 使用 removeEventListener 方法：
    - 可以使用 removeEventListener 方法移除之前添加的事件监听器。为了成功移除事件监听器，必须使用相同的函数引用和参数。
    const button = document.getElementById('myButton');
    function handleClick(event) {
      console.log('按钮被点击了！');
    }

    // 添加事件监听器
    button.addEventListener('click', handleClick);
    // 移除事件监听器
    button.removeEventListener('click', handleClick);
  2. 注意事项：
    - 直接使用匿名函数作为事件处理程序时，无法移除该事件监听器，因为没有函数引用可供移除。
    - 只有在添加事件监听器时使用的同一函数引用才能被移除。

  三、总结
  - 事件目标监控通过 addEventListener 方法实现，允许开发者响应用户交互。
  - 事件对象提供了关于事件的详细信息，包括触发事件的目标元素。
  - 使用 removeEventListener 方法可以移除已添加的事件监听器，确保使用相同的函数引用。
   -->
</head>
<body>

  <button id="add-event-listener">事件目标监听</button>
  <button id="remove-event-listener">移除事件监听器</button>


  <script>
    const addEventListenerButtonEl = document.getElementById('add-event-listener');
    const removeEventListenerButtonEl = document.getElementById('remove-event-listener');

    function handleClick(event) {
      console.log('按钮被点击了！');
      console.log('事件目标:', event.target); // 输出触发事件的目标元素
    }

    // 添加事件监听
    addEventListenerButtonEl.addEventListener('click', handleClick);

    // 移除事件监听器
    removeEventListenerButtonEl.onclick = function () {
      addEventListenerButtonEl.removeEventListener('click', handleClick);
    }
  </script>
  
</body>
</html>